<template>
  <div class="box">
    <h2>搜索的歌曲</h2>
    <template>
      <table>
        <tr @click="play(item)" v-for="(item, index) in data" :key="item.id">
          <td>{{ index | indexAdd }}.{{ item.name }}</td>
          <td>{{ item.artists[0].name }}</td>
        </tr>
      </table>
    </template>
  </div>
</template>

<script>
import loacl from '@/utils/local.js'
import { getSearch } from '@/api/music.js'
export default {
  data() {
    return {
      data: {}
    }
  },
  filters: {
    indexAdd(index) {
      return index - 0 + 1
    }
  },
  methods: {
    async serch(keywords) {
      // 判断是否为空
      // 不为空发请求
      const { result } = await getSearch({
        keywords
      })
      this.data = result.songs
    },
    async play(item) {
      console.log(item.artists[0].img1v1Url)
      // 请求成功
      this.$router.push(`/play/${item.id}`)
      loacl.setItem(item.id, item.artists[0].img1v1Url)
    }
  },
  created() {
    this.serch(this.$route.query.name)
  }
}
</script>

<style scoped>
.box {
  height: 100%;
  padding: 20px 100px;
}
h2 {
  font-weight: bold;
}
table {
  width: 100%;
  margin-top: 15px;
}
tr,
td {
  height: 40px;
  line-height: 40px;
}
tr:nth-of-type(even) {
  background-color: rgb(247, 247, 247);
}
tr:nth-of-type(odd) {
  background-color: white;
}
</style>
